<template>
	<div class="content">
		<div class="news">
			<div class="Bulletframe">
				<div class="bu_tatle">注册界面 </div>

				<div class="bc_content">
					<div class="btn_zh">
						<input placeholder="账号" class="btn_inp" type="text" v-model="username" />
					</div>
					<div class="btn_mm">
						<input placeholder="密码" class="btn_inp" type="text" v-model="password" />
					</div>

					<div class="btn_dl">
						<!-- <span>登录</span> -->
						<button @click="sendRequest()" class="btn_dlan">注册</button>
					</div>
					<div @click="dl()" class="reg">已有账号？点击登录</div>
				</div>
			</div>
			<div class="btn_ts">{{ ts }}</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				username: "",
				password: "",
				ts: "",
			};
		},

		methods: {
			sendRequest() {
				console.log("zc");
				// eslint-disable-next-line no-unused-vars
				var set = this
				if (set.username == '') {
					set.ts = '请输入用户名'
				} else if (set.password == '') {
					set.ts = '请输入密码'
				} else {
					set.ts = '正在登录请稍后.....'
					this.$axios({
						url: "/api/auth/register",
						method: "POST",
						data: {
							username: this.username,
							password: this.password,
						},
					}).then((res) => {
						console.log(res);
						set.ts = res.data.msg;
						setTimeout(function() {
							set.ts = ''
						}, 3000);
					});
				}

			},
			dl() {
				this.$router.push("/");
			},
		},
	};
</script>
<style scoped>
	.news {
		width: 100%;
		height: 795px;
		border-radius: 15px;
	}

	.bu_tatle {
		/* border: 1px solid #000; */
		font-size: 2.2rem;
		font-weight: 800;
		color: rgb(79, 114, 108);
		letter-spacing: 2vw;
	}

	.bc {
		width: 100%;
		height: 100%;
		opacity: 0.8;
	}

	.news-title {
		height: 50px;
		line-height: 50px;
		text-align: center;
	}

	.Bulletframe {
		position: absolute;
		width: 80vw;
		height: 100vw;
		border-radius: 8px;
		top: 20vw;
		right: 12vw;
		/* opacity: 0.95; */
		/* background-color: white; */
		/* border: 1px solid #000; */
	}

	.input {
		font-size: 1.5rem;
	}

	.btn_zh,
	.btn_mm {
		/* border: 1px solid #000; */
		margin-top: 13vw;
		/* margin-bottom: 50vm; */
		font-size: 1.9rem;
		font-weight: 600;
		/* line-height: 80px; */
	}

	.btn_inp {
		display: inline-block;
		height: 10vw;
		width: 70%;
		border: 2px solid rgb(167, 157, 157);
		border-radius: 10px;
		outline: none;
		padding-left: 5px;
		box-shadow: 10px 10px 10px #c9c6c6;
	}

	.reg {
		margin-top: 20vw;
		font-size: 20px;
	}

	.btn_dl {
		margin: 15vw auto;
		width: 75%;
	}

	.btn_dlan {
		font-size: 8vw;
		width: 100%;
		height: 100%;
		border-radius: 10px;
		outline: none;
		box-shadow: 10px 10px 10px #c9c6c6;
	}

	.btn_ts {
		font-size: 6vw;
		margin: 5vw auto;
		width: 90%;
		height: 15vw;
		text-align: center;
	}
</style>
